<template>
	<div id="QuestionDetail">
		<x-header :left-options="{showBack:false}" title="问答详情" class="header">
			<a slot="left" @click="common.back()"><i class="tp-icon icon-black-back"></i></a>
			<a slot="right" @click=""><i class="tp-icon icon-invoice-more"></i></a>
		</x-header>
		<div class="product">
			<div class="img">
				<img src="../assets/images/home/vote_detail_bg.jpg" />
			</div>
			<div class="detail">
				<p class="name">帝瓷房 陶瓷绿植办公修饰美</p>
				<p class="price"><span class="now-price"><i>￥</i>179.00</span><span class="orig-price">￥399.00</span></p>
			</div>
			<div class="add-cart">
				<router-link :to="'/shop/shopingDetial/id/'+commodity_id">
					<img src="../assets/images/icon/ic_question_answer_shopping_cart.png" />
				</router-link>
			</div>
		</div>
		<div class="anwer-list">
			<div class="question">
				<div class="top">
					<div class="img">
						<img :src="'/los/uploads/thumb/header/' + content.member_id + '_80X80.jpeg'"/>
						<i class="level-icon level-2"></i>
					</div>
					<div class="intro">
						<p class="name">{{content.member_nickname}}</p>
						<p class="time">{{common.timestampToTime(content.qa_time)}}</p>
					</div>
					<div class="focus">关注该问题</div>
				</div>
				<div class="bottom">
					<i class="qa-icon qa-question"></i>
					<p>{{content.qa_info}}</p>
				</div>
			</div>
			<div class="anwers">
				<div class="anwers-title"><i class="qa-icon qa-answer"></i>共12条回答</div>
				<div class="anwers-list" v-if="anwser_list">
					<div class="anwers-item" v-for="(item,index) in anwser_list">
						<div class="item-title">
							<div class="img">
								<img :src="'/los/uploads/thumb/header/' + item.member_id + '_80X80.jpeg'"/>
								<i class="level-icon level-2"></i>
							</div>
							<div class="name">{{item.member_nickname}}</div>
							<div class="time">{{item.add_time}}</div>
						</div>
						<div class="item-body">
							{{item.qa_info}}
						</div>
						<div class="item-foot">
							<div class="item"><i class="com-icon icon-comment"></i> 6</div>
							<div class="item"><i class="com-icon icon-zan"></i> 16</div>
						</div>
					</div>
				</div>
				<div class="nodata" v-else>
					暂无数据
				</div>
			</div>
		</div>
		<div class="publish-add">
			<div class="add-input">
				<input type="text" v-model="anwser_content" name="content" placeholder="帮助其他小伙伴(4~40字)" />
			</div>
			<div class="add-input">
				<button type="button" @click="submitAnwser()">回答</button>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import $ from 'jquery';
	import {
		Icon,
		XHeader,
		Toast,
		Checker,
		CheckerItem
	} from 'vux';

	export default {
		data() {
			return {
				commodity_id:'',
				anwser_content:'',
				anwser_list:'',
				question_id:'',
				content:'',
				goods:'',
			}
		},
		components: {
			Icon,
			XHeader,
			Toast,
			Checker,
			CheckerItem
		},
		watch: {},
		mounted() {
			this.getAnwserDetail();
			this.getAnwserList();
			this.getGoodsDetail();
		},
		activated() {

		},
		deactivated() {
			
		},
		created() {

		},
		//方法
		methods: {
			//获取问答详情
			getAnwserDetail:function(){
				let qa_id = this.$route.params.qid;
				this.$http({
					method:'GET',
					url:'/los/api/mall/goods_qa.json?qa_id='+ qa_id,
					data:''
				}).then((res)=>{
					//console.log(res);
					if(res.data.code == 1){
						this.content = res.data.data.goods_qa;
						this.commodity_id = this.content.commodity_id;
					}
				}).catch((err)=>{
					console.log(err);
				});
			},
			//获取回答列表
			getAnwserList:function(){
				let parent_id = this.$route.params.qid;
				this.$http({
					method:'GET',
					url:'/los/api/mall/goods_qa_list.json?parent_id=' + parent_id,
					data:''
				}).then((res)=>{
					//console.log(res);
					if(res.data.code == 1){
						this.anwser_list = res.data.data.goods_qa;
					}
				}).catch((err)=>{
					console.log(err);
				})
			},
			//提交回答
			submitAnwser:function(){
				let params = {
					commodity_id:this.commodity_id,
					qa_info:this.anwser_content,
					parent_id:this.$route.params.qid
				}
				//console.log(params);
				this.$http({
					method:'POST',
					url:'/los/api/mall_member/goods_answer.json',
					data:params
				}).then((res)=>{
					//console.log(res);
					this.getAnwserList();
				}).catch((err)=>{
					console.log(err);
				})
			},
			//产品详情
			getGoodsDetail:function(){
				this.$http({
					method: 'GET',
					url: '/los/api/mall/goods_details.json?commodity_id=' + this.commodity_id,
					data: ''
				}).then((result) => {
					if(result.data.code==1){
						this.goods = {
							thumb:result.data.data.goods.goods_thumb,
							title:result.data.data.goods.goods_name,
							now_price:result.data.data.goods.goods_price,
							original_price:result.data.data.goods.goods_price
						};
					}
				}).catch((err) => {
					console.log(err);
				})
			}
		}
	}
</script>

<style scoped>
	.header {
		background-color: #fff !important;
	}
	.product{
		background-color: #fff;
		margin: 0.26666rem 0.4rem;
		display: flex;
		border-radius: 0.13333rem;
		font-size: 0;
		padding-right: 0.4rem;
		align-items: center;
	}
	.product .img{
		width: 1.81333rem;
		height: 1.81333rem;
		border-top-left-radius: 0.13333rem;
		border-bottom-left-radius: 0.13333rem;
	}
	.product .img img{
		width: 1.81333rem;
		height: 1.81333rem;
		border-top-left-radius: 0.13333rem;
		border-bottom-left-radius: 0.13333rem;
	}
	.product .detail{
		flex: 1;
		line-height: 1;
		padding: 0.26666rem 0.4rem 0.26666rem 0.26666rem;
		overflow: hidden;
	}
	.product .detail .name{
		font-size: 0.37333rem;
		white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	}
	.product .detail .price{
		margin-top: 0.5rem;
	}
	.product .detail .now-price{
		font-size: 0.45333rem;
		color: #DD2835;
		font-weight: bold;
	}
	.product .detail .now-price i{
		font-size: 0.26666rem;
		font-style: normal;
		float: left;
	}
	.product .detail .orig-price{
		font-size: 0.26666rem;
		color: #666;
		margin-left: 0.26666rem;
		text-decoration: line-through;
	}
	.product .add-cart{
		width: 1.04rem;
		height: 1.04rem;
		text-align: center;
		background-color: #f5f5f5;
		border-radius: 50%;
		display: flex;
	    align-items: center;
	    justify-content: center;
	}
	.product .add-cart img{
		width: 0.50666rem;
		height: 0.50666rem;
	}
	.anwer-list{
		padding: 0.4rem 0.26666rem;
		background-color: #fff;
		margin: 0.26666rem 0.4rem;
		margin-bottom: 1.8rem;
		border-top-right-radius: 0.13333rem;
		border-top-left-radius: 0.13333rem;
	}
	.anwer-list .question{
		padding-bottom: 0.4rem;
		border-bottom: solid 1px #e6e6e6;
	}
	.anwer-list .question .img{
		width: 0.89333rem;
		height: 0.89333rem;
		border-radius: 50%;
		position: relative;
	}
	.anwer-list .question .img img{
		width: 0.89333rem;
		height: 0.89333rem;
		border-radius: 50%;
	}
	.anwer-list .question .img i{
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.anwer-list .question .top{
		display: flex;
		align-items: center;
	}
	.anwer-list .question .top .intro{
		flex: 1;
		margin-left: 0.26666rem;
	}
	.anwer-list .question .top .intro .name{
		font-size: 0.4rem;
		margin-bottom: 0.10666rem;
		line-height: 1;
	}
	.anwer-list .question .top .intro .time{
		font-size: 0.32rem;
		color: #999;
	}
	.anwer-list .question .top .focus{
		width: 2.29333rem;
		height: 0.72rem;
		border:1px solid rgba(221,40,54,1);
		border-radius:0.36rem;
		text-align: center;
		line-height: 0.72rem;
		color: #DD2835;
		font-size: 0.32rem;
	}
	.anwer-list .question .bottom{
		margin-top: 0.53333rem;
		display: flex;
		padding-left: 1.16rem;
	}
	.anwer-list .question .bottom p{
		padding-left: 0.26666rem;
		line-height: 0.6rem;
		font-size: 0.4rem;
		flex: 1;
	}
	.anwer-list .question .bottom i{
		margin-top: 0.06666rem;
	}
	.anwers .anwers-title{
		padding: 0.4rem 0;
		font-size: 0.37333rem;
	}
	.anwers .anwers-title i{
		margin-top: 0.02666rem;
		margin-right: 0.26666rem;
		float: left;
		color: #222;
	}
	.anwers-list .anwers-item{
		padding-bottom: 0.4rem;
	}
	.anwers-list .anwers-item .item-title{
		display: flex;
	}
	.anwers-list .anwers-item .item-title .img{
		position: relative;
		width: 0.89333rem;
		height: 0.89333rem;
		border-radius: 50%;
	}
	.anwers-list .anwers-item .item-title .img img{
		width: 0.89333rem;
		height: 0.89333rem;
		border-radius: 50%;
	}
	.anwers-list .anwers-item .item-title .img i{
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.anwers-list .anwers-item .item-title .name{
		margin-left: 0.26666rem;
		flex: 1;
		line-height: 0.89333rem;
		font-size: 0.37333rem;
	}
	.anwers-list .anwers-item .item-title .time{
		width: 2.74666rem;
		line-height: 0.89333rem;
		color: #999;
	}
	.anwers-list .anwers-item .item-body{
		padding: 0.4rem 0;
		padding-left: 1.16rem;
		font-size: 0.34666rem;
		color: #666;
	}
	.anwers-list .anwers-item .item-foot{
		display: flex;
		justify-content: flex-end;
	}
	.anwers-list .anwers-item .item-foot .item{
		margin-left: 0.4rem;
		display: flex;
		align-items: center;
	}
	.anwers-list .anwers-item .item-foot .item i{
		float: left;
		margin-right: 0.13333rem;
	}
	.publish-add{
		padding: 0.26666rem 0.4rem;
		width: 100%;
		height: 1.57333rem;
		position: fixed;
		left: 0;
		bottom: 0;
		border-top: solid 1px #e6e6e6;
		box-shadow:0px 1px 7px 0px rgba(230,230,230,1);
		display: flex;
		background-color: #fff;
	}
	.publish-add .add-input{
		
	}
	.publish-add .add-input input{
		width: 6.48rem;
		height: 1.04rem;
		padding: 0 0.26666rem;
		background-color: #f5f5f5;
		border-radius: 0.52rem;
		display: block;
	}
	.publish-add .add-input button{
		width:2.32rem;
		height:0.96rem;
		background:linear-gradient(90deg,rgba(221,40,53,1) 0%,rgba(221,40,87,1) 100%);
		border-radius:0.48rem;
		color: #fff;
		font-size: 0.4rem;
		margin-left: 0.4rem;
	}
	.publish-add .add-input button,
	.publish-add .add-input input{
		outline: none;
	}
</style>